<!--
 * @Author       : Sayolit
 * @Date         : 2023-01-08 12:15:44
 * @LastEditors  : Sayolit
 * @LastEditTime : 2023-01-10 12:31:45
 * @FilePath     : index.vue
 * @Description  : 
 * Copyright 2023 Sayolit, All Rights Reserved. 
 * 2023-01-08 12:15:44
-->
<script setup>
	import {
		ref,
		reactive,
		watchEffect,
		provide,
		inject,
		onMounted,
		computed,
		getCurrentInstance,
	} from 'vue'

	//两种写法，全部引入取别名和按需引入
	// import { getExampleData } from '../../apis/exampleApi'
	// import * as exampleApi from '../apis/exampleApi'
	import request from '../utils/request'
	import storage from '../utils/storage'
	import { useRouter, useRoute } from 'vue-router'

	const router = useRouter()
	const route = useRoute()

	// 基本量区
	const data = ref()

	// 提取所有路由path
	const allRoutePath = reactive([])

	const { proxy } = getCurrentInstance()

	onMounted(() => {
		for (var i = 0, r; (r = router.getRoutes()[i++]); ) {
			allRoutePath.push(r.path)
		}

		
	})
</script>

<template>
	<div class="index-main">
		<div class="main-title">Vue3 Template!</div>
		<div class="main-content">
			<p>目前路由有:</p>
			<p>
				<span @click="router.push(a)" v-for="a in allRoutePath"
					>&lt;{{ a }}></span
				>
			</p>
		</div>
	</div>
</template>
<style scoped lang="less">
	.index-main {
		width: 100%;
		height: 100vh;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-direction: column;
		padding-top: 40px;
		.main-title {
			// color: #42b883;
			font-weight: 988;
			letter-spacing: -1.5px;
			font-size: 3em;
			text-align: center;
			background: -webkit-linear-gradient(315deg, #42b883 15%, #647eff);
			background-clip: text;
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}

		.main-content {
			width: 960px;
			display: flex;
			flex-direction: column;

			p:nth-of-type(1) {
				letter-spacing: 2.5px;
				font-size: 2em;
				font-weight: bold;
			}

			p:nth-of-type(2) {
				letter-spacing: 5.5px;
				font-size: 24px;
				font-weight: bold;
			}

			> p {
				align-self: center;
				margin-top: 25px;
				color: black;

				> span {
					margin-right: 10px;
					cursor: pointer;
				}
				span:hover {
					transition: color 0.25s cubic-bezier(0.79, 0.14, 0.15, 0.86);
					color: rgb(99, 159, 227);
				}
			}
		}
	}
</style>
